
import * as echarts from 'echarts'
import {httpGet} from '@/js/api/baseApi'
var chinaMap

export default {
  data () {
    return {

    }
  },
  methods: {
    async init ({url, option}) {
      let res = await httpGet(url)
      let chinaJson = res
      echarts.registerMap('china', chinaJson)
      chinaMap = echarts.init(document.getElementById('china-map'))
      chinaMap.setOption(option)
      chinaMap.on('click', async (params) => {
        this.$router.push(`/province?name=${params.name}`)
      })
    },
    async provinceInit ({url, option}) {
      let res = await httpGet(url)
      let chinaJson = res
      echarts.registerMap('china', chinaJson)
      chinaMap = echarts.init(document.getElementById('china-map'))
      chinaMap.setOption(option)
      chinaMap.on('click', async (params) => {
        console.log(params)
        // TODO: 省市点击回调
      })
    },
    /**
     * 地图配置
     * @param {*} series {data,title,zoom, tooltip, center}
     * @returns 返回配置信息
     */
    constructorOption (series) {
      return {
        backgroundColor: '#fff',
        // 地图上圆点的提示
        tooltip: {
          trigger: 'item',
          formatter: function (params) {
            console.log(params)
            return params.name + ' : ' + params.value[2]
          }
        },
        // 图例按钮 点击可选择哪些不显示
        legend: {
          orient: 'vertical',
          left: 'left',
          top: 'bottom',
          data: [],
          textStyle: {
            color: '#fff'
          }
        },
        // 地理坐标系组件
        geo: {
          map: 'china',
          zoom: series.zoom || 1.25, // 设置初始化的缩放比例
          roam: false, // true 允许缩放拖动
          center: series.center || [104.123557, 32.058039],
          label: {
            // true hover时地图内部会显示城市名
            emphasis: {
              show: false
            }
          },
          selectedMode: 'single',
          select: {
            itemStyle: { // 选中区域的默认样式
              areaColor: '#c82a29'
            }
          },
          tooltip: series.tooltip || {
            show: true,
            trigger: 'item',
            formatter: function (params, ticket, callback) {
              let html = `<div class='m-tooltip-wrap'>
                <p>地区： ${params.name} </p></div>`
              if (series.mapHandler) {
                series.mapHandler(params).then(async res => {
                  if (!res) {
                    res = html
                  }
                  callback(ticket, res)
                })
              }
              return html
            }
          },
          itemStyle: {
            // 地图背景色
            normal: {
              areaColor: '#fff',
              borderColor: '#747569'
            },
            // 悬浮时
            emphasis: {
              areaColor: '#c82a29',
              borderColor: '#c82a29'
            }
          },
          regions: series.regions || [{ // 省份颜色与界线颜色的修改,如果想修改多个省份就在后面多添加几个对象即可.
            // name: '广东', // 对应的是import './china'  数据中的名称如: name: '广东'
            // itemStyle: {
            //   normal: {
            //     borderColor: '#c82a29', // 省份界线颜色
            //     borderWidth: 1 // 省份界线的宽度
            //   }
            // }
          }]
        },
        // 系列列表
        series: [
          {
            name: series.name,
            type: 'effectScatter',
            coordinateSystem: 'geo',
            data: series.data, // 从方法中传进来
            symbolSize: 8, // 点的大小
            symbol: 'circle',
            label: {
              normal: {
                show: false
              },
              emphasis: {
                show: false
              }
            },
            // 涟漪特效相关配置
            rippleEffect: {
              color: '#c82a29',
              period: 4,
              scale: 2,
              brushType: 'fill', // stroke ｜ fill
              number: 2
            },
            showEffectOn: 'render',
            itemStyle: {
              normal: {
                color: {
                  type: 'radial',
                  colorStops: [
                    {
                      offset: 1,
                      color: '#c82a29'
                    }
                  ],
                  global: false // 缺省为 false
                }
              }
            }
          }
        ]
      }
    }
  }
}
